<extend name="Common/layout" />

<block name="title"><title>首页设置</title></block>

<block name='css'>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/team.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/webuploader.css">
    <style>
        .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
            display: block;
            height: 350px;
            width: 100%;
            max-width: 100%;
        }
        #body a{
            color: #9d9d9d;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        }
        #body a:hover{
            text-decoration: none;
            color: #0055aa;
        }
    </style>
</block>

<block name="content">

    <!--content-->
    <div class="col-sm-offset-2">

        <div class="panel panel-default">
            <div class="panel-body" style="height:70px;">
                <div class="form-group">
                    <div class="col-sm-3">
                        <p style="font-size: 25px">首页设置</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default" style="min-height: 500px">
            <div class="panel-body" style="margin: 10px">
                <div class="panel panel-default" style="min-height: 500px">
                    <div class="panel-heading">
                        <h3 class="panel-title">轮播设置</h3>
                    </div>
                    <div class="panel-body" style="margin: 10px;">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <div class="item active">
                                    <if condition="$homePage1 neq NULL">
                                        <img src="__PUBLIC__/uploads/routeImage/{$homePage1}" alt="" class="homePage1">
                                        <else />
                                        <img src="__PUBLIC__/images/s1.jpg" alt="" class="homePage1">
                                    </if>
                                </div>
                                <div class="item">
                                    <if condition="$homePage2 neq NULL">
                                        <img src="__PUBLIC__/uploads/routeImage/{$homePage2}" alt=""  class="homePage2">
                                        <else />
                                        <img src="__PUBLIC__/images/s1.jpg" alt="" class="homePage2">
                                    </if>
                                </div>
                                <div class="item">
                                    <if condition="$homePage3 neq NULL">
                                        <img src="__PUBLIC__/uploads/routeImage/{$homePage3}" alt="" class="homePage3">
                                        <else />
                                        <img src="__PUBLIC__/images/s1.jpg" alt="" class="homePage3">
                                    </if>
                                </div>
                                <div class="item">
                                    <if condition="$homePage4 neq NULL">
                                        <img src="__PUBLIC__/uploads/routeImage/{$homePage4}" alt="" class="homePage4">
                                        <else />
                                        <img src="__PUBLIC__/images/s1.jpg" alt="" class="homePage4">
                                    </if>
                                </div>
                            </div>

                            <!-- Controls -->
                            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                        <div style="padding-top: 5px">
                            <button class="btn btn-default col-lg-3" onclick="openModal(1)">第一页</button>
                            <button class="btn btn-default col-lg-3" onclick="openModal(2)">第二页</button>
                            <button class="btn btn-default col-lg-3" onclick="openModal(3)">第三页</button>
                            <button class="btn btn-default col-lg-3" onclick="openModal(4)">第四页</button>
                        </div>
                        <div style="padding-top: 5px">
                            <button class="btn btn-default col-lg-3" onclick="reset(1)">重置</button>
                            <button class="btn btn-default col-lg-3" onclick="reset(2)">重置</button>
                            <button class="btn btn-default col-lg-3" onclick="reset(3)">重置</button>
                            <button class="btn btn-default col-lg-3" onclick="reset(4)">重置</button>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">公众号二维码</h3>
                    </div>
                    <div class="panel-body">
                        <div style="width: 280px;height: 280px;margin:30px;margin-left: 20%;float: left;" id="load">

                            <div  class="placeholder" style="padding: 0px;">
                                <img id="image"  style="width: 100%;height: 100%;"  src="__PUBLIC__/uploads/systemImage/{:isset($codeValue)?$codeValue:''}"/>
                            </div>

                        </div>

                        <div style="padding: 30px;">
                            <!--<button class="btn btn-primary btn-lg col-xs-2" id="picker"><span class="glyphicon glyphicon-open"></span>&nbsp;&nbsp;上传</button><br><br><br><br/><br/><br/><br/>-->
                            <div id="picker" class="col-xs-4 input-group"><span class="glyphicon glyphicon-open "></span>&nbsp;&nbsp;上传</div>
                            <span style="color:#A0A0A0 ;">建议:<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图片尺寸:不小于1080*640px;<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图片大小:不超过3M<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图片格式:png,jpg,bmp;<br/>
                            </span>
                        </div>
                        <div>
                            <button class="btn btn-success" onclick="saveCodeGZ()">保存</button>
                            &nbsp;
                            <button class="btn btn-default" onclick="resetCodeGZ()">重置</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <input type="checkbox" value="0" style="display: none" id="type">
        <div style="height: 200px">

        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">选择路线</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel panel-default">
                            <div class="panel-body" style="height:70px;">
                                <div class="form-group">
                                    <div class="col-sm-3">
                                        <div class="input-group">
                                            <input class="form-control" type="text" id="route_name" placeholder="路线名称">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default">搜索</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-body" style="height:100%;" id="body">

                            </div>
                        </div>
                        <ul class="pagination" id="pagination">
                            <!-- pages -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="temp" style="display: none;">
        <div class="col-md-4" style="padding-top: 10px">
            <a href="">
                <div style="border: 1px solid;">
                    <div style="width: 100%;height: 120px;border-bottom: 1px solid">
                        <img src="__PUBLIC__/images/s1.jpg" alt="" style="max-width: 100%; width: 100%; height: 120px">
                    </div>
                    <div>
                        <p align="center">test标题</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

</block>

<block name="js">
    <script type="text/javascript" src="__PUBLIC__/js/webuploader.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/PCASClass.js"></script>
    <script src="__PUBLIC__/js/page.js"></script>
    <script type="text/javascript">
        function saveHomePage1(id){
            $.ajax({
                url:"{:U('System/saveHomePage')}",
                type:"get",
                dataType:'json',
                data:{
                    'id':id,
                    'type':1
                },
                success:function(json){
                    if(json == 'fail'){
                        alert('设置出错！');
                    }else{
                        $('.homePage1').attr('src','__PUBLIC__/uploads/routeImage/'+json.value);
                        $('#myModal').modal('hide');
                    }
                }
            });
        }

        function saveHomePage2(id){
            $.ajax({
                url:"{:U('System/saveHomePage')}",
                type:"get",
                dataType:'json',
                data:{
                    'id':id,
                    'type':2
                },
                success:function(json){
                    if(json == 'fail'){
                        alert('设置出错！');
                    }else{
                        $('.homePage2').attr('src','__PUBLIC__/uploads/routeImage/'+json.value);
                        $('#myModal').modal('hide');
                    }
                }
            });
        }

        function saveHomePage3(id){
            $.ajax({
                url:"{:U('System/saveHomePage')}",
                type:"get",
                dataType:'json',
                data:{
                    'id':id,
                    'type':3
                },
                success:function(json){
                    if(json == 'fail'){
                        alert('设置出错！');
                    }else{
                        $('.homePage3').attr('src','__PUBLIC__/uploads/routeImage/'+json.value);
                        $('#myModal').modal('hide');
                    }
                }
            });
        }

        function saveHomePage4(id){
            $.ajax({
                url:"{:U('System/saveHomePage')}",
                type:"get",
                dataType:'json',
                data:{
                    'id':id,
                    'type':4
                },
                success:function(json){
                    if(json == 'fail'){
                        alert('设置出错！');
                    }else{
                        $('.homePage4').attr('src','__PUBLIC__/uploads/routeImage/'+json.value);
                        $('#myModal').modal('hide');
                    }
                }
            });
        }


        var fetchData = function(furl){
            if(furl==null){
                url = "{:U('Route/getRouteForSet')}";
            }else{
                url = furl;
            }

            $.ajax({
                url:url,
                type:'GET',
                dataType:'json',
                data:{
                    'title' :   $('#route_name').val(),
                }, success:function(json){
                    if(json.state!='1'){
                        alert("出错了");
                        return;
                    }

                    var show = json.show;
                    if(show == "" || show.total == 0){
                        $('#body').html('<tr><td colspan="7" align="center">没有找到记录!!</td></tr>');
                        $('.pagination').html("");
                        return;
                    }else{
                        //列表渲染
                        var list = json.data;
                        var $template_list_tbody = $('#temp');
                        var template_render = '';

                        for(var i in list){

                            $('#temp img').attr('src','__PUBLIC__/uploads/routeImage/'+ list[i].img_url);
                            $('#temp p').text(list[i].name);
                            var type = $('#type').val();
                            if(type == 1){
                                $('#temp a').attr('href','javascript:saveHomePage1('+list[i].id+')');
                            }else if(type == 2){
                                $('#temp a').attr('href','javascript:saveHomePage2('+list[i].id+')');
                            }else if(type == 3){
                                $('#temp a').attr('href','javascript:saveHomePage3('+list[i].id+')');
                            }else if(type == 4){
                                $('#temp a').attr('href','javascript:saveHomePage4('+list[i].id+')');
                            }

                            template_render += $template_list_tbody.html();
                        }

                        $('#body').html(template_render);
                    }
                    make_page(json.show,'.pagination','?');
                }
            })
        }

        $('#route_name').on("keyup",function(){
            fetchData();
        });

        function openModal(type){

            if(type == 1){
                $('#type').val(1);
                fetchData();
                $('#myModal').modal('show');
            }else if(type ==2){
                $('#type').val(2);
                fetchData();
                $('#myModal').modal('show');
            }else if(type == 3){
                $('#type').val(3);
                fetchData();
                $('#myModal').modal('show');
            }else if(type ==4){
                $('#type').val(4);
                fetchData();
                $('#myModal').modal('show');
            }

        }

        function reset(type){

            $.ajax({
                url:"{:U('System/deletePage')}",
                type:"get",
                dataType:'json',
                data:{
                    'type':type
                },
                success:function(json){
                    if(json == 'success'){
                        alert('重置成功！');
                        $('.homePage'+type).attr('src','__PUBLIC__/images/s1.jpg');
                    }else if(json == 'noExist'){
                        alert('该页未设置！');
                    }else{
                        alert('数据出错！');
                    }
                }
            });

        }

        var sort = 0;
        var imageFieName = '';
        var uploader,
                ratio = window.devicePixelRatio || 1,
                thumbnailWidth = 280 * ratio,
                thumbnailHeight = 280 * ratio;

        uploader = WebUploader.create({
            auto:true,
            resize:false,
            server:"{:U('System/uploadImg')}",
            pick:'#picker',
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            // fileNumLimit:1,
            filesizeLimit:3
        });

        uploader.on( 'fileQueued', function( file ) {
            sort = parseInt(sort+1);
            uploader.option('formData', {
                'id1':new Date().getTime(),
                'sort':parseInt(sort)
            });

            $img = $('#image');

            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );


        });

        uploader.on('uploadSuccess',function(){

        });

        uploader.on('uploadAccept',function(object,ret){

            imageFieName = ret;
            img = imageFieName;

        });

        function saveCodeGZ(){

            if(imageFieName == ''){
                imageFieName = -1;
            }
            $.ajax({
                url:"{:U('System/saveCodeGZ')}",
                type:'POST',
                dataType:'json',
                data:{
                    'image_name'    :   imageFieName

                },success:function(json){
                    alert(json);
                    window.location.href='{:U(\'System/listPage\')}';
                }
            });
        }

        function resetCodeGZ(){
            $('#image').attr('src','__PUBLIC__/uploads/systemImage/{:isset($codeValue)?$codeValue:\'\'}');
        }
    </script>

</block>